<template>
  <div class="app-container">
    <div v-if="crud.props.searchToggle">
      <el-input v-model="query.name" clearable size="small" placeholder="输入名称搜索" style="width: 200px;"
                class="filter-item" @keyup.enter.native="crud.toQuery"/>
      <rrOperation/>
    </div>
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"/>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="科室">
            <el-select v-model="form.administrativeId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.mnName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称(蒙)">
            <el-input v-model="form.mnName" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="名称(汉)">
            <el-input v-model="form.zhName" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="主诉(蒙)">
            <el-input v-model="form.mnChief" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="主诉(汉)">
            <el-input v-model="form.zhChief" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="现病史(蒙)">
            <el-input v-model="form.mnPresentIllness" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="现病史(汉)">
            <el-input v-model="form.zhPresentIllness" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="脉诊(蒙)">
            <el-input v-model="form.mnPulseTaking" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="脉诊(汉)">
            <el-input v-model="form.zhPulseTaking" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="舌诊(蒙)">
            <el-input v-model="form.mnTongue" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="舌诊(汉)">
            <el-input v-model="form.zhTongue" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="尿诊(蒙)">
            <el-input v-model="form.mnUroscopy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="尿诊(汉)">
            <el-input v-model="form.zhUroscopy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="辩证(蒙)">
            <el-input v-model="form.mnDialectic" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="辩证(汉)">
            <el-input v-model="form.zhDialectic" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="辅助检查(蒙)">
            <el-input v-model="form.mnInspection" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="辅助检查(汉)">
            <el-input v-model="form.zhInspection" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="蒙医诊断(蒙)">
            <el-input v-model="form.mnDiagnosis" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="蒙医诊断(汉)">
            <el-input v-model="form.zhDiagnosis" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="西医诊断(蒙)">
            <el-input v-model="form.mnWtDiagnosis" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="西医诊断(汉">
            <el-input v-model="form.zhWtDiagnosis" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="治疗原则(蒙)">
            <el-input v-model="form.mnTptPrinciple" style="width: 370px;"type="textarea"/>
          </el-form-item>
          <el-form-item label="治疗原则(汉)">
            <el-input v-model="form.zhTptPrinciple" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="药物疗法(蒙)">
            <el-input v-model="form.mnYwTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="药物疗法(汉)">
            <el-input v-model="form.zhYwTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="饮食疗法(蒙)">
            <el-input v-model="form.mnYsTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="饮食疗法(汉)">
            <el-input v-model="form.zhYsTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="疗术疗法(蒙)">
            <el-input v-model="form.mnLsTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="疗术疗法(汉)">
            <el-input v-model="form.zhLsTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="起居疗法(蒙)">
            <el-input v-model="form.mnQjTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="起居疗法(汉)">
            <el-input v-model="form.zhQjTherapy" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="职业(蒙)">
            <el-input v-model="form.mnJob" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="职业(汉)">
            <el-input v-model="form.zhJob" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="家庭病史(蒙)">
            <el-input v-model="form.mnJtHistory" style="width: 370px; " type="textarea"/>
          </el-form-item>
          <el-form-item label="家庭病史(汉)">
            <el-input v-model="form.zhJtHistory" style="width: 370px;" type="textarea"/>
          </el-form-item>
          <el-form-item label="籍贯(蒙)">
            <el-input v-model="form.mnNativePlace" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="籍贯(汉)">
            <el-input v-model="form.zhNativePlace" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="病例(蒙)">
            <el-input v-model="form.mnPathogenesis" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="病例(汉)">
            <el-input v-model="form.zhPathogenesis" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="月经史(蒙)">
            <el-input v-model="form.mnMarriageChildbirth" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="月经史(汉)">
            <el-input v-model="form.zhMarriageChildbirth" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="望诊(蒙)">
            <el-input v-model="form.mnObservation" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="望诊(汉)">
            <el-input v-model="form.zhObservation" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="一般情况(蒙)">
            <el-input v-model="form.mnCondition" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="一般情况(汉)">
            <el-input v-model="form.zhCondition" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="便诊(蒙)">
            <el-input v-model="form.mnStoolDiagnosis" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="便诊(汉)">
            <el-input v-model="form.zhStoolDiagnosis" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="查体(蒙)">
            <el-input v-model="form.mnPhysicalExamination" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="查体(汉)">
            <el-input v-model="form.zhPhysicalExamination" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="过敏史(蒙)">
            <el-input v-model="form.mnAllergic" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="过敏史(汉)">
            <el-input v-model="form.zhAllergic" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="护理与预防(蒙)">
            <el-input v-model="form.mnCarePrevention" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="护理与预防(汉)">
            <el-input v-model="form.zhCarePrevention" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="婚否">
            <template>
              <el-radio v-model="form.maritalStatus" label="0">已婚</el-radio>
              <el-radio v-model="form.maritalStatus" label="1">未婚</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="治疗方案(蒙)">
            <el-input v-model="form.mnTreatmentPlan" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="治疗方案(汉)">
            <el-input v-model="form.zhTreatmentPlan" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="工作单位(蒙)">
            <el-input v-model="form.mnWork" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="工作单位(汉)">
            <el-input v-model="form.zhWork" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="即往史(蒙)">
            <el-input v-model="form.mnPreHistory" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="即往史(汉)">
            <el-input v-model="form.zhPreHistory" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="民族">
            <el-select v-model="form.nation" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.nation"
                :key="item.id"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <template>
              <el-radio v-model="form.sex" label="0">男</el-radio>
              <el-radio v-model="form.sex" label="1">女</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="可靠性(蒙)">
            <el-input v-model="form.mnReliability" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="可靠性(汉)">
            <el-input v-model="form.zhReliability" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="个人史(蒙)">
            <el-input v-model="form.mnPslHistory" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="个人史(汉)">
            <el-input v-model="form.zhPslHistory" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="主诉人(蒙)">
            <el-input v-model="form.mnChiefSuitor" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="主诉人(汉)">
            <el-input v-model="form.zhChiefSuitor" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="季节">
            <el-input v-model="form.season" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="入院时间">
            <el-date-picker
              v-model="form.admissionTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="主治医师(蒙)">
            <el-input v-model="form.mnPhysician" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="主治医师(汉)">
            <el-input v-model="form.zhPhysician" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="现状(蒙)">
            <el-input v-model="form.mnStatusQuo" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="现状(汉)">
            <el-input v-model="form.zhStatusQuo" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="首程病例记录(蒙)">
            <el-input v-model="form.mnFirstMedicalRecord" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="首程病例记录(汉)">
            <el-input v-model="form.zhFirstMedicalRecord" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="首程病例时间">
            <el-date-picker
              v-model="form.firstMedicalTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="医嘱(蒙)">
            <el-input v-model="form.mnDoctorAdvice" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="医嘱(汉)">
            <el-input v-model="form.zhDoctorAdvice" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="病历(蒙)">
            <el-input v-model="form.mnMedicalHistory" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="病历(汉)">
            <el-input v-model="form.zhMedicalHistory" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 370px;"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="administrativeName" label="科室"/>
        <el-table-column prop="mnName" label="病名(蒙)"/>
        <el-table-column prop="zhName" label="病名(汉)"/>
        <el-table-column prop="mnChief" label="主诉(蒙)"/>
        <el-table-column prop="mnPresentIllness" label="现病史(蒙)"/>
        <el-table-column prop="zhPulseTaking" label="脉诊(汉)"/>
        <el-table-column prop="zhTongue" label="舌诊(汉)"/>
        <el-table-column prop="zhUroscopy" label="尿诊(汉)"/>
        <el-table-column prop="mnJob" label="职业(蒙)"/>
        <el-table-column prop="mnNativePlace" label="籍贯"/>
        <el-table-column prop="age" label="年龄"/>
        <el-table-column prop="maritalStatus" label="婚否">
          <template slot-scope="scope">
            <span v-if="scope.row.maritalStatus === '0'">已婚</span>
            <span v-else>未婚</span>
          </template>
        </el-table-column>
        <el-table-column prop="nation" label="民族">
          <template slot-scope="scope">
            {{ dict.label.nation[scope.row.nation] }}
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === '0'">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="season" label="季节"/>
        <el-table-column prop="admissionTime" label="入院时间"/>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              changeEnabled
              @change="changeState(scope.row,scope.row.status)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPer(['admin','hospitalizedCase:edit','hospitalizedCase:del'])" label="操作"
                         width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
import crudHospitalizedCase from '@/api/medicine/hospitalizedCase'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import {getOfficeByHpId} from "@/api/medicine/hospitalizedCase";

const defaultForm = {
  id: null,
  hpId:null,
  administrativeId: null,
  mnName: null,
  mnNameCode: null,
  zhName: null,
  mnChief: null,
  mnChiefCode: null,
  zhChief: null,
  mnPresentIllness: null,
  zhPresentIllness: null,
  mnPresentIllnessCode: null,
  mnPulseTaking: null,
  zhPulseTaking: null,
  mnPulseTakingCode: null,
  mnTongue: null,
  mnTongueCode: null,
  zhTongue: null,
  mnUroscopy: null,
  mnUroscopyCode: null,
  zhUroscopy: null,
  mnDialectic: null,
  zhDialectic: null,
  mnDialecticCode: null,
  mnInspection: null,
  mnInspectionCode: null,
  zhInspection: null,
  mnDiagnosis: null,
  mnDiagnosisCode: null,
  zhDiagnosis: null,
  mnWtDiagnosis: null,
  mnWtDiagnosisCode: null,
  zhWtDiagnosis: null,
  mnTptPrinciple: null,
  mnTptPrincipleCode: null,
  zhTptPrinciple: null,
  mnYwTherapy: null,
  mnYwTherapyCode: null,
  zhYwTherapy: null,
  mnYsTherapy: null,
  mnYsTherapyCode: null,
  zhYsTherapy: null,
  mnLsTherapy: null,
  mnLsTherapyCode: null,
  zhLsTherapy: null,
  mnQjTherapy: null,
  mnQjTherapyCode: null,
  zhQjTherapy: null,
  mnJob: null,
  mnJobCode: null,
  zhJob: null,
  mnJtHistory: null,
  mnJtHistoryCode: null,
  zhJtHistory: null,
  mnNativePlace: null,
  mnNativePlaceCode: null,
  zhNativePlace: null,
  mnPathogenesis: null,
  mnPathogenesisCode: null,
  zhPathogenesis: null,
  mnMarriageChildbirth: null,
  mnMarriageChildbirthCode: null,
  zhMarriageChildbirth: null,
  mnObservation: null,
  mnObservationCode: null,
  zhObservation: null,
  mnCondition: null,
  zhCondition: null,
  age: null,
  mnStoolDiagnosis: null,
  zhStoolDiagnosis: null,
  mnStoolDiagnosisCode: null,
  mnPhysicalExamination: null,
  zhPhysicalExamination: null,
  mnAllergic: null,
  mnAllergicCode: null,
  zhAllergic: null,
  mnCarePrevention: null,
  mnCarePreventionCode: null,
  zhCarePrevention: null,
  maritalStatus: null,
  mnTreatmentPlan: null,
  mnTreatmentPlanCode: null,
  zhTreatmentPlan: null,
  mnWork: null,
  mnWorkCode: null,
  zhWork: null,
  mnPreHistory: null,
  mnPreHistoryCode: null,
  zhPreHistory: null,
  nation: null,
  sex: null,
  mnReliability: null,
  mnReliabilityCode: null,
  zhReliability: null,
  mnPslHistory: null,
  mnPslHistoryCode: null,
  zhPslHistory: null,
  mnChiefSuitor: null,
  zhChiefSuitor: null,
  mnChiefSuitorCode: null,
  season: null,
  admissionTime: null,
  mnPhysician: null,
  mnPhysicianCode: null,
  zhPhysician: null,
  mnStatusQuo: null,
  mnStatusQuoCode: null,
  zhStatusQuo: null,
  mnFirstMedicalRecord: null,
  zhFirstMedicalRecord: null,
  firstMedicalTime: null,
  mnDoctorAdvice: null,
  mnDoctorAdviceCode: null,
  zhDoctorAdvice: null,
  mnMedicalHistory: null,
  mnMedicalHistoryCode: null,
  zhMedicalHistory: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  status: null,
  remark: null
}
export default {
  name: 'HospitalizedCase',
  components: {pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['nation'],
  cruds() {
    return CRUD({
      title: '病例管理',
      url: 'api/hospitalizedCase',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: {...crudHospitalizedCase}
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'hospitalizedCase:add'],
        edit: ['admin', 'hospitalizedCase:edit'],
        del: ['admin', 'hospitalizedCase:del']
      },
      options: [],
      rules: {
        mnName: [
          {required: true, message: '请输入名称(蒙)', trigger: 'change'}
        ],
        zhName: [
          {required: true, message: '请输入名称(汉)', trigger: 'change'}
        ],
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params.hpId = this.$route.query.param
      return true
    },
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
      }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit('pick', date);
        }
      }, {
        text: '一周前',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', date);
        }
      }]
    },
    changeState(data, val) {
      this.$confirm('此操作将修改状态值为 ' + val + ' 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudHospitalizedCase.edit(data).then(res => {
          this.$message({
            type: 'waring',
            message: '修改成功'
          });
        });
      }).catch(() => {
        if (val === 1) {
          data.status = 0;
        } else {
          data.status = 1;
        }
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
  },
  mounted() {
    getOfficeByHpId(this.$route.query.param).then(res => {
      this.options = res
    })
    defaultForm.hpId = this.$route.query.param;
  }
}
</script>

<style scoped>

</style>
